<link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../lib/overlayscrollbars/styles/overlayscrollbars.min.css">
<link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
        <div class="col-10 pt-2">
<!--            这里显示商品列表-->
<!--            themlyme模板显示-->
           <div class="row text-center">
               <div class="col-9"></div>
               <div class="col-3">
                   <a data-toggle="modal" data-target="#modalAdd" class="btn btn-warning">新增</a>
               </div>
           </div>
            <table class="table table-bordered">
                <thead>
                  <th>序号</th>
                  <th>商品名</th>
                  <th>价格</th>
                   <th>数量</th>
                  <th>种类</th>
                   <th>供应商</th>
                   <th>管理</th>
                </thead>
                <tbody>
                    <tr th:each="goods:${data}">
                       <td th:text="${goods.getId()}"></td>
                       <td th:text="${goods.name}"></td>
                       <td th:text="${goods.getPrice()}"></td>
                       <td th:text="${goods.getQuantity()}"></td>
                       <td th:text="${goods.getCategory()}"></td>
                       <td th:text="${goods.getSupplier()}"></td>
                        <td>
                             <button class="btn btn-danger" th:onclick="del([[${goods.getId()}]])">删除</button>
                             <button data-toggle="modal" data-target="#modalUpdate" class="btn btn-info"
                                     th:onclick="update([[${goods.getId()}]],[[${goods.name}]],[[${goods.getPrice()}]],
                                     [[${goods.getQuantity()}]],[[${goods.getCategory()}]],[[${goods.getSupplier()}]])">更新</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

<!--    模态框测试-->
    <!-- 定义一个新增的子窗体模态框（Modal）HTML代码 -->
    <div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel1">新增商品</h4>
                </div>
                <div class="modal-body">
<!--                    新增表单区&ndash;&gt;-->
                    <form method="post" action="/goods/goodsAddProcess">
                        <div class="form-control">
                            <label for="">商品名称</label>
                            <input type="text" name="name" id="">
                        </div>
                        <div class="form-control">
                            <label for="">商品价格</label>
                            <input type="text" name="price" id="">
                        </div>
                        <div class="form-control">
                            <label for="">商品数量</label>
                            <input type="text" name="quantity" id="">
                        </div>
                        <div class="form-control">
                            <label for="">商品种类</label>
                            <input type="text" name="category" id="">
                        </div>
                        <div class="form-control">
                            <label for="">商品供应商</label>
                            <input type="text" name="supplier" id="">
                        </div>
                        <div class="form-control">
                            <input type="submit" value="提交" class="btn btn-primary">
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
<!--  定义更新子窗体模态框代码区-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel2">更新商品</h4>
                </div>
                <div class="modal-body">
                    <div class="form-control">
                        <label for="">序号</label>
                        <input type="text" name="id" id="Id"  disabled="disabled">
                    </div>
                    <div class="form-control">
                        <label for="">名称</label>
                        <input type="text" name="name" id="name" >
                    </div>
                    <div class="form-control">
                        <label for="">价格</label>
                        <input type="text" name="price" id="price" >
                    </div>
                    <div class="form-control">
                        <label for="">数量</label>
                        <input type="text" name="quantity" id="quantity">
                    </div>
                    <div class="form-control">
                        <label for="">种类</label>
                        <input type="text" name="category" id="category">
                    </div>
                    <div class="form-control">
                        <label for="">供应商</label>
                        <input type="text" name="supplier" id="supplier">
                    </div>
                    <div class="form-control">
                        <button class="btn btn-danger" id="btnUpdate">更新</button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->



<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
<!--   删除函数方法-->
function del(id){
//     确认是否删除
    var flag = confirm("是否删除该条记录?");
    if(flag==true){
    //     使用ajax传递参数的方法交给后端去做处理
        $.post("/api/goodsDelete",{'id':id},function(res){
            console.log(res)
            if(res==1){
                alert("删除成功!");
                location.reload();
            }else{
                alert("删除失败!");
            }
        })
    }
}

// 更新
function  update(id,name,price,number,category,supplier){
//    肯定有了这个商品的信息，包括商品的所有字段值
    console.log(id,name,price,number)
//     单独去给更新代码块的表单value赋值
    $('#Id').val(id);
    $('#name').val(name);
    $('#price').val(price);
    $('#quantity').val(number);
    $('#category').val(category);
    $('#supplier').val(supplier);
//     去使用ajax方式提交处理
}
// 提交更新处理
$('#btnUpdate').click(function(){
    var flag = confirm("确认提交更新?");
    if(flag==true){
        $.post("/api/goodsUpdateProcess",{"id":$('#Id').val(),"name":$('#name').val(),"price":$('#price').val(),
            "quantity":$('#quantity').val(),"category":$('#category').val(),"supplier":$('#supplier').val()
        },function(res){
            if(res==1){
                alert("更新ok");
                location.href="/goods/goodsList";
            }else{
                alert("更新失败!");
            }
        })
    }
})
</script>